<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox  } from 'element-plus'
import { SuccessFilled, CircleCloseFilled, Position } from '@element-plus/icons-vue'
import '../../assets/iconfont/iconfont.css'
import { getPodListHandler, deletePodHandler } from '../../api/pod';


const props = defineProps({
    buttonName: {
        type: String,
        default: "查看"
    },
    clusterId: {
        type: String
    },
    namespace: {
        type: String
    },
    fieldSelector: { // 等价于kubectl get pod --fieldselector 'spec.nodeName=node01'
        type: String
    },
    labelSelectorObj: {
        type: Object
    },
    resourceType: {
        type: String
    },
    resourceName: {
        type: String
    },
    buttonType: {
        type: String,
        default: 'primary'
    }
    
})
const visible = ref(false)
let items = ref([])

const getPodList = async () => {
    // labelSelector需要转字符串
    let labelSelector = ""
    if (props.labelSelectorObj != null){
        let labelSelectorList = []
        for (let [key, value] of Object.entries(props.labelSelectorObj)) {
            const keyValueString = `${key}=${value}`
            labelSelectorList.push(keyValueString)
        }
        labelSelector = labelSelectorList.join(",")
    }
    console.log("拼接的labelSelector:", labelSelector)

    await getPodListHandler(props.clusterId, props.namespace, labelSelector, props.fieldSelector).then((res) => {
        items.value = res.data.data.items
        console.log("当前pod列表:",items.value)
    })
}
const showPods = async () => {
    getPodList()
    visible.value = true
}
const getContainerStatus = computed(() => (containerName, containerStatuses) => {
    if ( containerStatuses == undefined) {
        return false
    }
    for (let i=0; i<containerStatuses.length;i++) {
        const status = containerStatuses[i]
        if (status.name == containerName) {
            return status.ready
        }
    }
})
const deletePod = (namespace, name, force) => {
    console.log("删除pod:", props.clusterId, namespace, name)
    ElMessageBox.confirm(
        `名称空间:${namespace} Pod: ${name} 确定吗？`,
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        deletePodHandler(props.clusterId, namespace, name, force).then(
        (res) => {
          ElMessage({
              message: res.data.message,
              type: 'success',
          })
          getPodList()
        }
      )
    }).catch(() => {
        return
    })
}
</script>
<template>
    <el-button title="获取调度到该节点上的pod" :type="props.buttonType" link @click="showPods">{{ props.buttonName }}</el-button>
    <el-dialog append-to-body width="70%" center draggable v-model="visible">
        <template #header="{ titleId, titleClass }">
            <div :id="titleId" :class="titleClass" style="margin: 10px auto 0 auto;">
                <el-tag class="el-tag" size="large" title="集群">{{ props.clusterId }}</el-tag>>
                <el-tag class="el-tag" size="large" title="类型">{{ props.resourceType }}</el-tag>>
                <el-tag class="el-tag" size="large" title="资源名称">{{ props.resourceName }}</el-tag>
            </div>
            <!-- <el-steps
                    :active="3"
                    finish-status="success"
                    simple
                >
                    <el-step :title="props.clusterId" />
                    <el-step :title="props.resourceType" :icon="CaretRight"/>
                    <el-step :title="props.resourceName" :icon="CaretRight"/>
                </el-steps> -->
        </template>
        <div class="auto-layout" style="height: 480px;overflow-y: auto;">
            <div :KEY="pod.metadata.name" v-for="pod in items">
                <el-card style="width: 400px;height: 320px;border-radius: 15px;box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);">
                    <template #header>
                        <div class="auto-space-between" style="height: 20px;">
                            <div style="margin: -20px auto; ">
                                <span title="pod名称" style="font-size: 24px;">{{ pod.metadata.name }}</span>
                                <span style="display: block;font-size: 13px" title="创建时间">{{ pod.metadata.creationTimestamp }}</span>
                            </div>
                            <div>
                                <el-button
                                v-if="!pod.metadata.deletionTimestamp"
                                type="warning" link @click="deletePod(pod.metadata.namespace, pod.metadata.name, false)">删除</el-button>
                                <el-button v-else type="warning" link
                                @click="deletePod(pod.metadata.namespace, pod.metadata.name, true)">  强制删除</el-button>
                            </div>
                        </div>
                    </template>
                    <div>
                        <!-- 展示namespace和状态 -->
                        <div class="auto-space-between">
                            <div style="height: 10px;"> 
                                <el-button type="primary" title="pod所在名称空间">
                                    <i style="margin-right: 10px; font-size: 20px;">
                                        <el-icon style="font-size: 20px;"><Position/></el-icon>
                                    </i>
                                    <span>{{ pod.metadata.namespace }}</span>
                                </el-button>
                            </div>
                            <div> 
                                <el-button :type="pod.status.phase == 'Running'? 'success': 'warning'" title="pod运行状态">
                                    <i style="margin-right: 10px; font-size: 20px;">
                                        <el-icon style="font-size: 20px;" v-if="pod.status.phase == 'Running'"><SuccessFilled/></el-icon>
                                        <el-icon style="font-size: 20px;" v-if="pod.status.phase != 'Running'"><CircleCloseFilled/></el-icon>
                                    </i>
                                    <span>{{ pod.status.phase }}</span>
                                </el-button>
                            </div>
                        </div>

                        <!-- 展示所有的容器 -->
                        <div>
                            <div class="auto-layout">
                                <div style="height: 40px; overflow-y: auto;">
                                    <el-button :key="c.name" v-for="(c, index) in pod.spec.containers" title="容器名称"
                                    :type="getContainerStatus(c.name, pod.status.containerStatuses)? 'success' :'danger'">
                                        <i style="margin-right: 10px; font-size: 20px;">
                                            <el-icon style="font-size: 20px;" v-if="getContainerStatus(c.name, pod.status.containerStatuses)"><SuccessFilled/></el-icon>
                                            <el-icon style="font-size: 20px;" v-if="!getContainerStatus(c.name, pod.status.containerStatuses)"><CircleCloseFilled/></el-icon>
                                        </i>
                                        <span>{{ c.name }}</span>
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </el-dialog>
</template>
<style lang="less" scoped>
.el-tag {
    margin-left: 20px;
    margin-right: 20px;
    font-size: 20px;
}

</style>